<template>
	<div class="app-container">
		<div>
			<el-button @click='addFn'>添加</el-button>
		</div>
		<div class='tableInfo'>
			<el-table  :data="moneyList" ref='elTable' border style="width: 100%">
				<el-table-column  type="index" width="80" align="left" /> 
				<el-table-column label="费用名称" prop="name" align="left" min-width="200" />			
				<el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width">
					<template slot-scope="{row}">
						<el-button @click='editDataFn(row)' type="primary">编辑</el-button>
						<el-button type="danger" @click='deleteDataFn(row.id)'>删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		
		<el-dialog    :title="title"  :visible.sync="moneyShow"	  width="30%" @closed='closeDialogFn' >
		  <el-form :model="ruleDataForm" :rules="rules" ref="ruleForm" label-width="100px" >
		    <el-form-item label="费用名称" prop="name">
		      <el-input v-model="ruleDataForm.name" placeholder="请输入内容"></el-input>
		    </el-form-item>
		 </el-form>	
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="moneyShow = false">取 消</el-button>			
			<el-button  v-if='addShow' type="primary" @click="addSureFn('ruleForm')">确 定</el-button>
			<el-button  v-else type="primary" @click="updateDataFn('ruleForm')">修 改</el-button>			    
		  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		data(){
			return{
				moneyShow:false,
				title:'',
				ruleDataForm:{
					name:''
				},
				 rules: {
				          name: [
				            { required: true, message: '请输入费用名称', trigger: 'blur' }				            
				          ]
				},
			    addShow:true,
				apiPath:'',
				moneyList:[{id:1,name:'电费'},{id:2,name:'水费'},{id:3,name:'保证金'},{id:4,name:'管理费'}],
				id_str:''
			}
		},
		created() {
			//获取列表
			this.get_list();
		},
		methods:{
			closeDialogFn(){			 
			  this.addShow = true;
			  this.ruleDataForm = {
			  	name:''
			  } 		
			},
			get_list(){			 	
			},
			addFn(){
				this.$nextTick(() => { //清空表单验证的数据
					if (this.$refs.ruleForm) {
						this.$refs.ruleForm.resetFields();
					}
				});
				this.title = '添加';
				this.ruleDataForm = {
					name:''
				}
				this.moneyShow = true;
			},
			addSureFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
					  this.$api.add(this.ruleDataForm, this.apiPath).then(res => {
					  	if (res.id) {
					  		this.$message({
					  			message: '添加成功',
					  			type: 'success'
					  		});
					  		this.moneyShow = false;
					  		this.get_list();
					  	}
					  });	
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			editDataFn(row){
				this.$nextTick(() => { //清空表单验证的数据
					if (this.$refs.ruleForm) {
						this.$refs.ruleForm.resetFields();
					}
				});
				let rowCopy = {...row}
				this.ruleDataForm = rowCopy;
				this.id_str = rowCopy.id;
				this.title = '编辑';
				this.addShow = false;
				this.moneyShow = true;			
			},
			updateDataFn(formName){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let data = {
						   id_str:this.id_str,
							...this.ruleDataForm   
						}
						this.$api.edit(data, this.apiPath).then(res => {
							if (res) {
								this.$message({
									message: '修改成功',
									type: 'success'
								});
								this.moneyShow = false;
								this.get_list();
							}
						});
					} else {						
						return false;
					}
				});
			},
			deleteDataFn(id){
			  this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
			            confirmButtonText: '确定',
			            cancelButtonText: '取消',
			            type: 'warning'
			          }).then(() => {
					  this.$api.del({id_str:id},this.apiPath).then(()=>{
						this.$message({
						  type: 'success',
						  message: '删除成功!'
						});  
					  });	   
			           
			          }).catch(() => {
			            this.$message({
			              type: 'info',
			              message: '已取消删除'
			            });          
			          });	
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tableInfo{
		margin-top: 20px;
	}
</style>